Class 與 Style 綁定(1)

數據綁定的一個常見需求場景是操縱元素的 CSS class 列表和內聯樣式。因為 class 和 style 都是元素属性，我們可以和其他属性一樣使用 v-bind 將它們和動態的字符串綁定。但是，在處理比較複雜的綁定時，通過拼接生成字符串是麻煩且易出錯的。因此，Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強。除了字符串外，表達式的值也可以是對象或數組。

綁定 HTML class

綁定對象
我們可以向 :class (v-bind:class 的縮寫) 傳遞一個對象來動態切換 class：

<div :class="{ active: isActive }"></div>

上面的語法表示 active 是否存在取決於數據屬性 isActive 的真假值。

你可以在對象中寫多個字段來操作多個 class。此外，:class 指令也可以和一般的 class 屬性共存。例如下面這樣的狀態：

const isActive = ref(true)
const hasError = ref(false)

配合以下模板：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的結果會是：

<div class="static active"></div>

當 isActive 或者 hasError 改變時，class 列表會隨之更新。舉例來說，如果 hasError 變為 true，class 列表也會變成 "static active text-danger"。

綁定的對象並不一定需要寫成內聯字面量的形式，也可以直接綁定一個對象：

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div>

這將渲染出：

<div class="active"></div>

我們也可以綁定一個返回對象的計算屬性。這是一個常見且很有用的技巧：

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

綁定數組

我們可以給 :class 綁定一個數組來渲染多個 CSS class：

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

渲染的結果是：

<div class="active text-danger"></div>

如果你還想在數組中有條件地渲染某個 class，你可以使用三元表達式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass 會一直存在，但 activeClass 只會在 isActive 為真時才存在。

然而，這可能在有多個依賴條件的 class 時會有些冗長。因此你也可以在數組中嵌套對象：

<div :class="[{ activeClass: isActive }, errorClass]"></div>

在組件上使用

對於只有一個根元素的組件，當你使用了 class 屬性時，這些 class 會被添加到根元素上並與該元素上已有的 class 合併。

舉例來說，如果你聲明了一個組件名叫 MyComponent，模板如下：

<!-- 子組件模板 -->
<p class="foo bar">Hi!</p>
在使用時添加一些 class：

<!-- 在使用組件時 -->
<MyComponent class="baz boo" />

渲染出的 HTML 為：

<p class="foo bar baz boo">Hi!</p>

Class 的綁定也是同樣的：

<MyComponent :class="{ active: isActive }" />

當 isActive 為真時，被渲染的 HTML 會是：

<p class="foo bar active">Hi!</p>

如果你的組件有多個根元素，你將需要指定哪個根元素來接收這個 class。你可以通過組件的 $attrs 屬性來指定接收的元素：

<!-- MyComponent 模板使用 $attrs 時 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

這將被渲染為：

<p class="baz">Hi!</p>
<span>This is a child component</span>